<script setup lang="ts">
import type { FormInstance } from 'ant-design-vue';

import { computed, ref, watch } from 'vue';

import { message } from 'ant-design-vue';
import dayjs from 'dayjs';

interface Props {
  visible: boolean;
}

interface Emits {
  (e: 'update:visible',value: boolean): void;
  (e: 'success'): void;
}

const props = defineProps<Props>();
const emit = defineEmits<Emits>();

const formRef = ref<FormInstance>();

// 表单数据
const formData = ref({
  petName: '',
  petType: '',
  ownerName: '',
  phone: '',
  department: '',
  doctor: '',
  appointmentDate: null,
  appointmentTime: null,
  symptoms: '',
  urgency: 'normal',
  notes: '',
});

// 可用医生列表
const availableDoctors = computed(() => {
  const doctors = [
    { label: '李医生 - 内科', value: '李医生' },
    { label: '王医生 - 外科', value: '王医生' },
    { label: '赵医生 - 皮肤科', value: '赵医生' },
    { label: '陈医生 - 牙科', value: '陈医生' },
    { label: '张医生 - 急诊科', value: '张医生' },
  ];

  // 根据选择的科室过滤医生
  if (formData.value.department) {
    const departmentMap: Record<string, string> = {
      internal: '内科',
      surgery: '外科',
      dermatology: '皮肤科',
      dental: '牙科',
      emergency: '急诊科',
    };
    const selectedDept = departmentMap[formData.value.department];
    return doctors.filter((doctor) => doctor.label.includes(selectedDept));
  }

  return doctors;
});

// 表单验证规则
const rules = {
  petName: [{ required: true, message: '请输入宠物名称' }],
  petType: [{ required: true, message: '请选择宠物类型' }],
  ownerName: [{ required: true, message: '请输入主人姓名' }],
  phone: [
    { required: true, message: '请输入联系电话' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号' },
  ],
  department: [{ required: true, message: '请选择科室' }],
  doctor: [{ required: true, message: '请选择医生' }],
  appointmentDate: [{ required: true, message: '请选择预约日期' }],
  appointmentTime: [{ required: true, message: '请选择预约时间' }],
  symptoms: [{ required: true, message: '请描述症状' }],
  urgency: [{ required: true, message: '请选择紧急程度' }],
};

// 禁用过去的日期
const disabledDate = (current: dayjs.Dayjs) => {
  return current && current < dayjs().startOf('day');
};

// 监听科室变化，重置医生选择
watch(
  () => formData.value.department,
  () => {
    formData.value.doctor = '';
  },
);

// 方法
const resetForm = () => {
  formData.value = {
    petName: '',
    petType: '',
    ownerName: '',
    phone: '',
    department: '',
    doctor: '',
    appointmentDate: null,
    appointmentTime: null,
    symptoms: '',
    urgency: 'normal',
    notes: '',
  };
};

const handleOk = async () => {
  try {
    await formRef.value?.validate();

    // 这里可以调用API保存预约数据
    message.success('预约创建成功');
    emit('success');
    emit('update:visible', false);
    resetForm();
  } catch (error) {
    console.error('表单验证失败:', error);
  }
};

const handleCancel = () => {
  emit('update:visible', false);
  resetForm();
};
</script>

<template>
  <a-modal
    :open="visible"
    title="📅 快速预约"
    width="800px"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-form ref="formRef" :model="formData" :rules="rules" layout="vertical">
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="宠物名称" name="petName">
            <a-input
              v-model:value="formData.petName"
              placeholder="请输入宠物名称"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="宠物类型" name="petType">
            <a-select
              v-model:value="formData.petType"
              placeholder="请选择宠物类型"
            >
              <a-select-option value="dog">狗狗</a-select-option>
              <a-select-option value="cat">猫咪</a-select-option>
              <a-select-option value="bird">鸟类</a-select-option>
              <a-select-option value="rabbit">兔子</a-select-option>
              <a-select-option value="other">其他</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="主人姓名" name="ownerName">
            <a-input
              v-model:value="formData.ownerName"
              placeholder="请输入主人姓名"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="联系电话" name="phone">
            <a-input
              v-model:value="formData.phone"
              placeholder="请输入联系电话"
            />
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="预约科室" name="department">
            <a-select
              v-model:value="formData.department"
              placeholder="请选择科室"
            >
              <a-select-option value="internal">内科</a-select-option>
              <a-select-option value="surgery">外科</a-select-option>
              <a-select-option value="dermatology">皮肤科</a-select-option>
              <a-select-option value="dental">牙科</a-select-option>
              <a-select-option value="emergency">急诊科</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="预约医生" name="doctor">
            <a-select
              v-model:value="formData.doctor"
              placeholder="请选择医生"
              :options="availableDoctors"
            />
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="预约日期" name="appointmentDate">
            <a-date-picker
              v-model:value="formData.appointmentDate"
              placeholder="请选择预约日期"
              style="width: 100%"
              :disabled-date="disabledDate"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="预约时间" name="appointmentTime">
            <a-time-picker
              v-model:value="formData.appointmentTime"
              placeholder="请选择预约时间"
              style="width: 100%"
              format="HH:mm"
              :minute-step="30"
            />
          </a-form-item>
        </a-col>
      </a-row>

      <a-form-item label="症状描述" name="symptoms">
        <a-textarea
          v-model:value="formData.symptoms"
          :rows="3"
          placeholder="请描述宠物的症状或就诊原因"
        />
      </a-form-item>

      <a-form-item label="紧急程度" name="urgency">
        <a-radio-group v-model:value="formData.urgency">
          <a-radio value="normal">普通</a-radio>
          <a-radio value="urgent">紧急</a-radio>
          <a-radio value="emergency">急诊</a-radio>
        </a-radio-group>
      </a-form-item>

      <a-form-item label="备注" name="notes">
        <a-textarea
          v-model:value="formData.notes"
          :rows="2"
          placeholder="其他需要说明的信息"
        />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<style scoped>
:deep(.ant-form-item) {
  margin-bottom: 16px;
}

:deep(.ant-radio-group) {
  display: flex;
  gap: 16px;
}
</style>
